<template>
    <div class="house-environment">
        <div class="house-environment-title">
            <div class="title">通风柜状态</div>
            <img src="@/assets/images/bigScreen/line1.png" alt="行为识别安全" class="title-img" />
        </div>
        <div class="house-environment-content">
            <div class="house-environment-content-item" v-for="(item, index) in trueEnvironment" :key="item.id">
                <div class="house-environment-content-item-content">
                    <div class="house-environment-content-item-content-img">
                        <img :src="item.url" alt="" class="house-environment-content-item-pic" width="32px"
                            height="32px" />
                    </div>
                    <div class="house-environment-content-item-content-info">
                        <div class="house-environment-content-item-name">{{ item.value }}</div>
                        <div class="house-environment-content-item-name">{{ item.content }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import customChart from '@/components/echarts/customChart.vue'
import { onBeforeMount, ref, shallowRef, onMounted, computed } from 'vue'
import { environmentData1 } from '../bigScreen.data';
import { controlVav } from '@/api/bigScreen/bigScreen.api'

// const option = {
//     // 悬停提示框
//     tooltip: {
//         trigger: 'axis',
//         formatter: (params: any[]) => {
//             return `${params[0].axisValue}: ${params[0].value}`;
//         }
//     },
//     // x轴配置
//     xAxis: {
//         type: 'category',
//         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
//         axisLabel: {
//             color: '#666'
//         },
//         axisLine: {
//             lineStyle: { color: '#999' }
//         }
//     },
//     // y轴配置
//     yAxis: {
//         type: 'value',
//         name: '次数',
//         axisLine: {
//             lineStyle: { color: '#999' }
//         },
//         splitLine: {
//             lineStyle: { type: 'dashed', color: '#eee' }
//         }
//     },
//     // 图表网格
//     grid: {
//         top: '15%',
//         right: '5%',
//         bottom: '10%',
//         left: '5%',
//         containLabel: true // 确保标签在区域内
//     },
//     series: [
//         {
//             data: [820, 932, 901, 934, 1290, 1330, 1320],
//             type: 'line',
//             smooth: true,
//             itemStyle: {
//                 color: '#5470C6' // 主题色
//             },
//             lineStyle: {
//                 width: 2
//             },
//             areaStyle: {
//                 color: {
//                     type: 'linear',
//                     x: 0,
//                     y: 0,
//                     x2: 0,
//                     y2: 1,
//                     colorStops: [{ offset: 0, color: '#5470C61A' }, { offset: 1, color: '#5470C600' }]
//                 }
//             },
//             label: {
//                 show: true,
//                 position: 'top',
//                 color: '#5470C6'
//             }
//         }
//     ]
// };

// const myCharts = ref(null)
// const isActiveName = ref<boolean>(false)
// const setOptions = shallowRef<Record<string, any>>({})

// onBeforeMount(() => {
//     setOptions.value = option
// })

const temperature = ref('0')
const viewHeight = ref('0')
const getTemp = async () => {
    try {
        await controlVav({
            functionCode: '9',
            value: '0',
            oper: '1',
        }).then((res) => {
            if (res.code === 200) {
                temperature.value = res.result
            }
        })
    } catch (error) {
        console.log('错误:' + error);
    }
}
const getViewHeight = async () => {
    try {
        await controlVav({
            functionCode: '11',
            value: '0',
            oper: '1',
        }).then((res) => {
            if (res.code === 200) {
                viewHeight.value = res.result
            }
        })
    } catch (error) {
        console.log('错误:' + error);
    }
}

onMounted(() => {
    getTemp()
    getViewHeight()
})

const trueEnvironment = computed(() => {
    return environmentData1.map((item) => {
        if (item.id === '1') {
            item.value = temperature.value + '°C'
        }
        if (item.id === '2') {
            item.value = viewHeight.value + 'RH'
        }
        return item
    })
})

</script>

<style lang="scss" scoped>
.house-environment {
    height: 100%;
    width: 100%;
    padding: 1px;
    background-image: url('@/assets/images/light_bg2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;

    &-title {
        height: 15%;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
            font-weight: bold;
            color: darkturquoise;
        }

        .title-img {
            width: 30%;
            height: 50%;
        }
    }

    &-content {
        height: 85%;
        width: 100%;
        padding: 5px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
    }

    // background-color: white;
    .house-environment-chart {
        height: 90%;
    }
}
</style>